import { getSize, getUserTypeValue } from "@/command/apiTool";
import Banner from "@/components/Banner";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import CardView from "@/components/CardView";
import DetailedInfo from "@/components/DetailedInfo";
import InfoCell from "@/components/InfoCell";
import { ILabelProps } from "@/components/Label/types";
import PageTitle from "@/components/PageTitle";
import RowView from "@/components/RowView";
import { defineComponent, reactive, ref } from "vue";
import { useRequest } from "./request";
import { Divider } from "vant";
import Text from "@/components/Text";
import { useRouter } from "vue-router";
import vrImg from "@/assets/image/vr.png";
import "./index.less";

export default defineComponent({
  setup() {
    const { detailinfo } = useRequest();
    const router = useRouter();
    const getData1 = () => {
      return {
        data: [
          {
            name: "营业时间",
            value: `${detailinfo.value.startTime}-${detailinfo.value.endTime}`,
            width: "100%",
          },
          {
            name: "联系方式",
            value: detailinfo.value.phone,
            width: "100%",
          },
          // {
          //   name: "",
          //   value: detailinfo.value.introduce,
          //   width: "100%",
          // },
        ],
        text: "宁波市镇海国振果蔬专业合作社成立于2012年05月07日 于镇海区九龙湖镇田顾工业区,法定代表代人为吴国1范…",
        desc: "镇海区九龙湖镇农基站",
        title: detailinfo.value.name,
      };
    };

    const render1 = () => {
      const data = getData1();
      return (
        <CardView class={["!px-0 py-0"]}>
          <Banner url={detailinfo.value.img} />
          <DetailedInfo
            {...detailinfo.value}
            {...data}
            text={data.data}
            class={"!rounded-[0px]"}
          />
        </CardView>
      );
    };
    const renderJj = () => {
      return (
        <CardView title="农场简介" radius={0}>
          <Text>{detailinfo.value.introduce}</Text>
        </CardView>
      );
    };
    const render2 = () => {
      return (
        <CardView title="种植信息" radius={0}>
          <RowView class="!items-start flex justify-between flex-wrap">
            {detailinfo.value.productList.map((e: any) => {
              return (
                <div class={"text-[#4d4d4d]"}>
                  <img src={e.img} class={["w-[104px] h-[75px] rounded-5"]} />
                  {e.productName}
                </div>
              );
            })}
          </RowView>
        </CardView>
      );
    };

    const render3 = () => {
      return (
        <CardView title="所用设备" radius={0}>
          <RowView class="!items-start flex justify-between flex-wrap">
            {detailinfo.value.deviceList.map((e: any) => {
              return (
                <div
                  class={"text-[#4d4d4d]"}
                  onClick={() => router.push(`/deviceDetails?id=${e.id}`)}
                >
                  <img
                    src={e.deviceImg}
                    class={["w-[85px] h-[85px] rounded-5"]}
                  />
                  {e.deviceName}
                </div>
              );
            })}
          </RowView>
        </CardView>
      );
    };
    const render4 = () => {
      return (
        <CardView title="农场荣誉">
          <RowView class="!items-start flex justify-between flex-wrap">
            {detailinfo.value.honorList.map((e: any) => {
              return (
                <div>
                  <img
                    src={e.honorImg}
                    class={["w-[158px] h-[105px] rounded-5"]}
                  />
                </div>
              );
            })}
          </RowView>
        </CardView>
      );
    };
    const render5 = () => {
      return (
        <CardView title="农场VR全景">
          <div class={"relative"}>
            <div
              class="w-full h-[210px] rounded-5"
              style={{
                backgroundImage: `url(${detailinfo.value.vrFile})`,
                backgroundSize: "100% 100%",
              }}
            ></div>
            <img src={vrImg} class={["vr_img"]} />
          </div>
        </CardView>
      );
    };

    return () => {
      return (
        <PageTitle
          title={"数字基地示范点"}
          childClass="!p-[0px] m-child-top-10 !pb-[50px]"
        >
          {render1()}
          {renderJj()}
          {render2()}
          {render3()}
          {render4()}
          {render5()}
        </PageTitle>
      );
    };
  },
});
